import React, { Component ,useState} from "react";
import { Container } from "./style";

import { Button } from "antd";
import {  AudioOutlined } from "@ant-design/icons";

import { Input } from "antd";
import { DatePicker, Space, Select, Table, Tag ,Modal } from "antd";
import "antd/dist/antd.css"; // or 'antd/dist/antd.less'
import AddManagement from "../../PutInStorage/AddManagement"
// 中文
import { ConfigProvider } from "antd";
import zhCN from "antd/lib/locale/zh_CN";
import moment from "moment";
import "moment/locale/zh-cn";
moment.locale("zh-cn");

const { Option } = Select;
const { Column, ColumnGroup } = Table;
const { Search } = Input;
const { RangePicker } = DatePicker;
const suffix = (
  <AudioOutlined
    style={{
      fontSize: 16,
      color: "#1890ff",
    }}
  />
);

// 添加按钮----弹窗
const App = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  return (
    <>
      <Button type="primary" onClick={showModal}>
        添加
      </Button>
      <Modal 
      title="物品档案" 
      visible={isModalVisible} 
      onOk={handleOk} 
      onCancel={handleCancel}
      // footer={null}
      width={1000}
      >
        <AddManagement/>
      </Modal>
    </>
  );
};



const columns = [
  
  {
    title: "序号",
    dataIndex: "id",
    key: "id",
    align:'center',
  },
  {
    title: "物品名称",
    dataIndex: "name",
    key: "name",
    align:'center',
  },
  {
    title: "物品编码",
    dataIndex: "number",
    key: "number",
    align:'center',
  },
  {
    title: "物品分类",
    dataIndex: "type",
    key: "type",
    align:'center',
  },
  {
    title: "品牌",
    dataIndex: "brand",
    key: "brand",
    align:'center',
  },
  {
    title: "规格/型号",
    dataIndex: "model",
    key: "model",
    align:'center',
  },
  {
    title: "单位",
    dataIndex: "Company",
    key: "Company",
    align:'center',
  },
  {
    title: "当前库存",
    dataIndex: "current",
    key: "current",
    align:'center',
  },
  {
    title: "入库数量",
    dataIndex: "StorageQuantity",
    key: "StorageQuantity",
    align:'center',
  },
  {
    title: "价格",
    dataIndex: "price",
    key: "price",
    align:'center',
  },
  {
    title: "购买人",
    dataIndex: "Buyer",
    key: "Buyer",
    align:'center',
  },
  {
    title: "金额",
    dataIndex: "tags",
    key: "tags",
    align:'center',
  },
];

const data = [
  {
    id: "1",
    name: "黑色签字笔",
    number: "hasd",
    type: "办公用品",
    brand: "得力",
    model: "gel16.04/0.5",
    Company: "只",
    current: "100",
    StorageQuantity: "100",
    price: "1",
    Buyer: "黄哲",
    tags: ["100"],
  },
  {
    id: "2",
    name: "黑色签字笔",
    number: "hasd",
    type: "办公用品",
    brand: "得力",
    model: "gel16.04/0.5",
    Company: "只",
    current: "50",
    StorageQuantity: "100",
    price: "2",
    Buyer: "黄哲",
    tags: ["200"],
  },
  {
    id: "3",
    name: "黑色签字笔",
    number: "hasd",
    type: "办公用品",
    brand: "得力",
    model: "gel16.04/0.5",
    Company: "只",
    current: "50",
    StorageQuantity: "100",
    price: "5",
    Buyer: "黄哲",
    tags: ["500"],
  },
];

const onSearch = (value) => console.log(value);
// const { RangePicker } = DatePicker;
// import connect from './connect'
// @connect
class index extends Component {
  constructor() {
    super();

    // 搜索
    function onChange(value) {
      console.log(`selected ${value}`);
    }

    function onBlur() {
      console.log("blur");
    }

    function onFocus() {
      console.log("focus");
    }

    function onSearch(val) {
      console.log("search:", val);
    }
  }
  render() {
    return (
      <Container>
        <div class="header">
          <div class="hh1">
            <b class="red">*</b>
            <span class="nn">入库单号：</span>
            <Space span={2}>
              <Input defaultValue="RK20190523001" />
            </Space>
          </div>

          <div class="hh1">
            <b class="red">*</b>
            <span class="nn">入库日期：</span>
            <ConfigProvider locale={zhCN}>
              <DatePicker defaultValue={moment("2020-12-25", "YYYY-MM-DD")} style={{ width: 200 }}/>
            </ConfigProvider>
          </div>

          <div class="hh1">
            <b class="red">*</b>
            <span class="nn">入库仓库：</span>
            <Select
              showSearch
              style={{ width: 200 }}
              placeholder="采购入库"
              optionFilterProp="children"
              onChange={this.onChange}
              onFocus={this.onFocus}
              onBlur={this.onBlur}
              onSearch={this.onSearch}
              filterOption={(input, option) =>
                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
              }
            >
              <Option value="store">选择入库仓库</Option>
              <Option value="xingzheng">本部高中-行政楼1号仓库</Option>
              <Option value="shiyan">本部高中-实验耗材仓库</Option>
              <Option value="jiaming">嘉明分校-嘉明仓库</Option>
              <Option value="dijing">帝景分校-行政楼一号仓库</Option>
            </Select>
          </div>

          <div class="hh1">
            <b class="red">*</b>
            <span class="nn">入库类型：</span>
            <Select
              showSearch
              style={{ width: 200 }}
              placeholder="采购入库"
              optionFilterProp="children"
              onChange={this.onChange}
              onFocus={this.onFocus}
              onBlur={this.onBlur}
              onSearch={this.onSearch}
              filterOption={(input, option) =>
                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
              }
            >
              <Option value="in">采购入库</Option>
              <Option value="panying">盘盈</Option>
              <Option value="other">其他</Option>
            </Select>
          </div>

          <div class="hh1">
            <span class="nn">供应商：</span>
            <Select
              showSearch
              style={{ width: 200 }}
              placeholder="全部供应商"
              optionFilterProp="children"
              onChange={this.onChange}
              onFocus={this.onFocus}
              onBlur={this.onBlur}
              onSearch={this.onSearch}
              filterOption={(input, option) =>
                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
              }
            >
              <Option value="all">全部供应商</Option>
              <Option value="jd">京东商城盈</Option>
              <Option value="wuxing">金五星批发市场</Option>
              <Option value="xiaomi">小米有品</Option>
            </Select>
          </div>
        </div>

        <div class="hh2">
          <div class="hh22">
          <App />
          </div>
          <div class="hh22">
            <Button>删除</Button>
          </div>
          <div class="hh22">
            <Button>导入</Button>
          </div>
          <div class="hh22">
            <Search
              placeholder="请输入物品编码"
              onSearch={onSearch}
              style={{ width: 200, margin: "0 10px" }}
            />
          </div>
        </div>

        <div class="hh3">
          <Table 
          columns={columns} 
          dataSource={data} 
          pagination={false}
          bordered 
          />
        </div>

        <div class="hh4">
          <span>制单人：</span>
          <span>黄哲</span>
          <span>制单日期：</span>
          <span>{moment().format("YYYY-MM-DD")}</span>
        </div>
        <div class="clear"></div>
        <div class="hh5">
          <span>备注：</span>
          <textarea name="" id="" cols="120" rows="4"></textarea>
        </div>
        <div class="clear"></div>
        <div class="hh6">
          <span>
            <Button type="primary">确定</Button>
          </span>
          <span>
            <Button>取消</Button>
          </span>
        </div>


 
      </Container>
    );
  }
}

export default index;
